<template>
	<view>
		<view class="userImg" @click="SetAvter(1)">
			<image :src="userInfo.avatar" mode="aspectFill"></image>
			<view class="select">
				<u-icon name="camera" color="#ffffff" size="28"></u-icon>
			</view>
			<view class="userImg_text"  style="font-weight: 600;">点击选择头像</view>
		</view>
		<view class="box" @click="popupBox(1)">
			<view class="text" >昵称</view>
			<view class="div"  style="font-weight: 600;">{{userInfo.nickname}}</view>
			<view class="router">
				<u-icon name="arrow-right" color="#999"></u-icon>
			</view>
		</view>
		
		<view class="box" @click="genderShow = true">
			<view class="text" >性别</view>
			<view class="div" v-if="userInfo.gender == 0"  style="font-weight: 600;">
				点击设置性别
			</view>
			<view class="div" v-else>
				{{genderS}}
			</view>
			<view class="router">
				<u-icon name="arrow-right" color="#999"></u-icon>
			</view>
			<u-select 
				v-model="genderShow" 
				mode="single-column" 
				:list="genderList" 
				@confirm="genderConfirm"
			></u-select>
		</view>
		<view class="box" @click="timeShow = true">
			<view class="text" >生日</view>
			<view class="div" v-if="userInfo.birthday == ''"  style="font-weight: 600;">点击设置生日</view>
			<view class="div" v-else>{{userInfo.birthday}}</view>
			<view class="router">
				<u-icon name="arrow-right" color="#999"></u-icon>
			</view>
			<u-picker 
				mode="time" 
				v-model="timeShow" 
				:end-year="endYear"
				:params="timeParams" 
				@confirm="timeConfirm"
			></u-picker>
		</view>
		<view class="box" @click="regionShow = true">
			<view class="text">地区</view>
			<view class="div" v-if="userInfo.city == ''"  style="font-weight: 600;">点击设置地区</view>
			<view class="div" v-else>{{userInfo.city}}</view>
			<view class="router">
				<u-icon name="arrow-right" color="#999"></u-icon>
			</view>
			<u-picker 
				mode="region" 
				v-model="regionShow" 
				:params="regionParams" 
				@confirm="regionConfirm"
			></u-picker>
		</view>
		<view class="box" @click="popupBox(2)">
			<view class="text">简介</view>
			<view class="div" v-if="userInfo.profile == ''">暂未设置个人简介~</view>
			<view class="div" v-else>{{userInfo.profile}}</view>
			<view class="router">
				<u-icon name="arrow-right" color="#999"></u-icon>
			</view>
		</view>
		<view class="box"  @click="selectImg(2)">
			<view class="text">主页背景</view>
			<view class="div">点击更换图片</view>
			<view class="router">
				<u-icon name="arrow-right" color="#999"></u-icon>
			</view>
		</view>
		<!-- <view class="box">
			<view class="text">添加标签</view>
			<view class="div">点击添加标签</view>
			<view class="router">
				<u-icon name="arrow-right" color="#999"></u-icon>
			</view>
		</view> -->
		<view class="box">
			<view class="text">手机号</view>
			<view class="div" v-if="userInfo.mobile == ''">点击设置手机号</view>
			<view class="div" v-else>{{userInfo.mobile}}</view>
			<view class="router">
				<!-- <u-icon name="arrow-right" color="#999"></u-icon> -->
			</view>
		</view>
		<!-- <view class="box"  @click="popupBox(3)">
			<view class="text">身份证</view>
			<view class="div" v-if="userInfo.identityid == ''">点击填写身份证</view>
			<view class="div" v-else>{{userInfo.identityid}}</view>
			<view class="router">
				<u-icon name="arrow-right" color="#999"></u-icon>
			</view>
		</view>
		<view class="box"  @click="popupBox(4)">
			<view class="text">微信号</view>
			<view class="div" v-if="userInfo.weixin == ''">点击填写微信号</view>
			<view class="div" v-else>{{userInfo.weixin}}</view>
			<view class="router">
				<u-icon name="arrow-right" color="#999"></u-icon>
			</view>
		</view> -->
		<view class="textPopup" v-if="isTextPopup">
			<view class="textPopup_box">
				<view class="textPopup_box_title">
					{{textPopupTitle}}
				</view>
				<view class="textPopup_box_input">
					<input :placeholder="textPopupInput" v-model="popupText"/>
				</view>
				<view class="textPopup_box_btn">
					<view class="textPopup_box_btn_box" @click="quxiao">取消</view>
					<view class="textPopup_box_btn_box" @click="queding">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo:{},
				genderShow: false,
				genderS:'',
				genderList: [
					{
						value: '1',
						label: '男'
					},
					{
						value: '2',
						label: '女'
					}
				],
				timeShow:false,
				endYear:'',
				timeParams: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				regionShow:false,
				regionParams: {
					province: true,
					city: true,
					area: false
				},
				textPopupTitle:'测试',
				textPopupInput:'测绘师',
				popupText:'',
				isTextPopup:false,
				popupType:'',
				Im:'',
			}
		},
		onLoad() {
			//判断是否是华为
			let isHuaWei= getApp().globalData.isHuaWei;
			if(isHuaWei){
				this.setData({
					isHuaWei: isHuaWei
				})
			}
			this.userInfo = uni.getStorageSync('userInfo');
			this.endYear = new Date().getFullYear();
			if(this.userInfo.gender == 0){
				this.genderS = '点击设置性别'
			}else if(this.userInfo.gender == 1){
				this.genderS = '男'
			}else{
				this.genderS = '女'
			}
			
		},
		methods: {
			popupBox:function(type){
				this.popupType = type;
				this.isTextPopup = true;
				if(type == 1){
					this.textPopupTitle = '修改昵称';
					this.textPopupInput = '请输入修改的昵称';
				}else if(type == 2){
					this.textPopupTitle = '修改简介';
					this.textPopupInput = '请输入修改的简介';
				}else if(type == 3){
					this.textPopupTitle = '修改身份证';
					this.textPopupInput = '请输入身份证号';
				}else if(type == 4){
					this.textPopupTitle = '修改微信号';
					this.textPopupInput = '请输入微信号';
				}
			},
			queding:function(){
				if(this.popupText == ''){
					return this.$Toast('请输入修改的内容！')
				}
				if(this.popupType == 1){
					this.userInfo.nickname = this.popupText;
					var info = {nickname:this.userInfo.nickname}
				}else if(this.popupType == 2){
					this.userInfo.profile = this.popupText;
					var info = {profile:this.userInfo.profile}
				}else if(this.popupType == 3){
					if(this.popupText.length != 18){
						return this.$Toast('请输入正确的身份证号')
					}
					this.userInfo.identityid = this.popupText;
					var info = {identityid:this.userInfo.identityid}
				}else if(this.popupType == 4){
					this.userInfo.weixin = this.popupText;
					var info = {weixin:this.userInfo.weixin}
				}
				uni.setStorageSync('userInfo',this.userInfo);
				this.amend(info);
			},
			amend:function(info){
				this.$show();
				uni.request({
					url: 'https://oa.yuxiang123.cn/api/user/profile_save',
					header: {
						"token":uni.getStorageSync('token'),
						"content-type": "application/x-www-form-urlencoded"
					},
					method: 'POST',
					data:info,
					success: (res) => {
						this.$hide()
						this.$Toast(res.data.msg)
						if(res.data.code == 1){
							this.popupText = '';
							this.isTextPopup = false;
							
						}
					}
				})
			},
			quxiao:function(){
				this.isTextPopup = false;
			},
			SetAvter:function(type){
				var that = this;
				// #ifdef  APP-PLUS
				if(!uni.getStorageSync('get_image_userInfo') && that.isHuaWei){
					uni.showModal({
						title: "获取你的相册/相机权限",
						content: "将获取你的相册/相机权限,用于上传头像",
						success: function (res) {
							if (res.cancel) {
							} else if (res.confirm) {
								uni.setStorageSync('get_image_userInfo',1);
								uni.chooseImage({
									count: 1, //默认9
									crop:{
										width:300,
										height:300
									},
									success: function (res) {
										that.upImg(res.tempFilePaths[0],type)
									},
									fail(e) {
										if(that.isHuaWei){
											if(e.errCode == 11 &&  e.errMsg == 'chooseImage:fail No Permission'){
												uni.showModal({
													content: '检测到您没打开相机权限，如需使用拍摄功能请前往设置开启相机权限？',
													confirmText: "确认",
													cancelText: '取消',
												})
											}else if(e.errCode == 12 &&  e.errMsg == 'chooseImage:fail No Permission'){
												uni.showModal({
													content: '检测到您没打开相册权限，如需使用相册选择功能请前往设置开启相册权限？',
													confirmText: "确认",
													cancelText: '取消',
												})
											}
										}
									}
								});
							}
						},
					});
				}else{
					uni.chooseImage({
						count: 1, //默认9
						crop:{
							width:300,
							height:300
						},
						success: function (res) {
							that.upImg(res.tempFilePaths[0],type)
						},
						fail(e) {
							if(that.isHuaWei){
								if(e.errCode == 11 &&  e.errMsg == 'chooseImage:fail No Permission'){
									uni.showModal({
										content: '检测到您没打开相机权限，如需使用拍摄功能请前往设置开启相机权限？',
										confirmText: "确认",
										cancelText: '取消',
									})
								}else if(e.errCode == 12 &&  e.errMsg == 'chooseImage:fail No Permission'){
									uni.showModal({
										content: '检测到您没打开相册权限，如需使用相册选择功能请前往设置开启相册权限？',
										confirmText: "确认",
										cancelText: '取消',
									})
								}
							}
						}
					});
				}
				
				// #endif
				// #ifdef MP-WEIXIN
				uni.chooseImage({
					count: 1, //默认9
					success: function (res) {
						// 2 对获取到的图片进行裁剪
						wx.cropImage({
							src: res.tempFilePaths[0], // 图片路径
							cropScale: '1:1', // 裁剪比例
							success:function(res){
								that.upImg(res.tempFilePath,type)
							},
							complete: (res) => {
								console.log(res,"裁剪调用结束");
							}
						})
					}
				});
				// #endif
			},
			selectImg:function(type){
				var that = this;
				// #ifdef  APP-PLUS
				if(!uni.getStorageSync('get_image_userInfo') && that.isHuaWei){
					uni.showModal({
						title: "获取你的相册/相机权限",
						content: "将获取你的相册/相机权限,用于上传头像",
						success: function (res) {
							if (res.cancel) {
							} else if (res.confirm) {
								uni.setStorageSync('get_image_userInfo',1);
								uni.chooseImage({
									count: 1, //默认9
									crop:{
										width:1000,
										height:550
									},
									success: function (res) {
										that.upImg(res.tempFilePaths[0],type)
									},
									fail(e) {
										if(that.isHuaWei){
											if(e.errCode == 11 &&  e.errMsg == 'chooseImage:fail No Permission'){
												uni.showModal({
													content: '检测到您没打开相机权限，如需使用拍摄功能请前往设置开启相机权限？',
													confirmText: "确认",
													cancelText: '取消',
												})
											}else if(e.errCode == 12 &&  e.errMsg == 'chooseImage:fail No Permission'){
												uni.showModal({
													content: '检测到您没打开相册权限，如需使用相册选择功能请前往设置开启相册权限？',
													confirmText: "确认",
													cancelText: '取消',
												})
											}
										}
									}
								});
							}
						},
					});
				}else{
					uni.chooseImage({
						count: 1, //默认9
						crop:{
							width:1000,
							height:550
						},
						success: function (res) {
							that.upImg(res.tempFilePaths[0],type)
						},
						fail(e) {
							if(that.isHuaWei){
								if(e.errCode == 11 &&  e.errMsg == 'chooseImage:fail No Permission'){
									uni.showModal({
										content: '检测到您没打开相机权限，如需使用拍摄功能请前往设置开启相机权限？',
										confirmText: "确认",
										cancelText: '取消',
									})
								}else if(e.errCode == 12 &&  e.errMsg == 'chooseImage:fail No Permission'){
									uni.showModal({
										content: '检测到您没打开相册权限，如需使用相册选择功能请前往设置开启相册权限？',
										confirmText: "确认",
										cancelText: '取消',
									})
								}
							}
						}
					});
				}
				// #endif
				// #ifdef MP-WEIXIN
				uni.chooseImage({
					count: 1, //默认9
					success: function (res) {
						// 2 对获取到的图片进行裁剪
						wx.cropImage({
							src: res.tempFilePaths[0], // 图片路径
							cropScale: '16:9', // 裁剪比例
							success:function(res){
								that.upImg(res.tempFilePath,type)
							},
							complete: (res) => {
								console.log(res,"裁剪调用结束");
							}
						})
					}
				});
				// #endif
			},
			upImg:function(url,type){
				this.$show();
				var _this = this;
				uni.uploadFile({
					url: 'https://oa.yuxiang123.cn/api/common/upload',
					filePath: url,
					name: 'file',
					success: (uploadFileRes) => {
						_this.$hide()
						if(type == 1){
							console.log('avatar');
							_this.userInfo.avatar = JSON.parse(uploadFileRes.data).data.fullurl;	
						}else{
							_this.userInfo.bgimg = JSON.parse(uploadFileRes.data).data.fullurl;
						}
						uni.setStorageSync('userInfo',_this.userInfo);
						var info = {avatar:this.userInfo.avatar}
						_this.amend(info);
					}
				});
			},
			genderConfirm:function(e){
				this.genderS = e[0].label;
				this.userInfo.gender = e[0].value;
				uni.setStorageSync('userInfo',this.userInfo);
				this.amend({gender:this.userInfo.gender});
			},
			timeConfirm:function(e){
				this.userInfo.birthday = e.year+'-'+e.month+'-'+e.day;
				uni.setStorageSync('userInfo',this.userInfo);
				this.amend({birthday:this.userInfo.birthday});
			},
			regionConfirm:function(e){
				this.userInfo.city = e.province.label+'-'+e.city.label;
				uni.setStorageSync('userInfo',this.userInfo);
				this.amend({city:this.userInfo.city});
			}
		}
	}
</script>

<style lang="scss" scoped>

.textPopup{
	position: fixed;
	width: 100%;
	top: 0;
	bottom: 0;
	background-color: rgba($color: #000000, $alpha: 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	.textPopup_box{
		background-color: #FFFFFF;
		width: 90%;
		border-radius: 20upx;
		padding: 20upx;
		.textPopup_box_title{
			padding: 20rpx;
			text-align: center;
			font-size: 36upx;
		}
		.textPopup_box_input{
			input{
				padding:20upx;
				font-size:32upx;
				background-color: #f0f0f0;
				border-radius: 6upx;
			}
		}
		.textPopup_box_btn{
			display: flex;
			align-items: center;
			.textPopup_box_btn_box{
				flex: 1;
				text-align: center;
				padding: 30upx 0;
				font-size:36upx;
			}
		}
	}
}







.userImg{
	padding: 100upx 0;
	text-align: center;
	position: relative;
	image{
		border-radius: 50%;
		width: 150upx;
		height: 150upx;
	}
	.select{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.userImg_text{
		font-size: 28upx;
	}
}

.box{
	display: flex;
	align-items: center;
	padding: 30upx 20upx;
	border-bottom: 1px solid #f5f5f5;
	.text{
		
	}
	.div{
		flex: 1;
		text-align: right;
		margin-right: 20upx;
		color:#999;
	}
}
</style>
